/**
 * 系统管理种类管理
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>种类管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true"  class="user-search">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="category.categoryName" placeholder="输入种类名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit1()">添加</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="tableData.slice((pageNum - 1) * pageSize, pageNum * pageSize)" highlight-current-row v-loading="loading"
              border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column sortable prop="categoryName" label="种类名称" >
      </el-table-column>
      <el-table-column sortable prop="createTime" label="创建时间" >
      </el-table-column>
      <el-table-column sortable prop="modifiedTime" label="修改时间" >
      </el-table-column>
      <el-table-column align="center" sortable prop="variety" label="品种" >
        <template slot-scope="scope">
          <span v-if="scope.row.variety ==0">植物</span>
          <span v-if="scope.row.variety ==1">动物</span>
        </template>
      </el-table-column>
      <el-table-column sortable prop="browse" label="浏览次数" >
      </el-table-column>
      <el-table-column align="center" label="操作" >
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteUser( scope.row)">删除</el-button>
          <el-button size="mini" type="success" @click="menuAccess(scope.row)">查看种类</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[2, 3, 4, 5,10, tableData.length]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length"
    >
    </el-pagination>
    <!-- ·查看界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible2" width="30%" @click='closeDialog()'>
      <el-form label-width="120px" :model="list" ref="editForm" :rules="rules">
        <el-form-item label="种类名称" prop="categoryName">
          <el-input size="small" v-model="list.categoryName"  disabled auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="浏览次数" prop="browse">
          <el-input size="small" v-model="list.browse" disabled ></el-input>
        </el-form-item>
        <el-form-item label="种类图片" prop="categoryImg">
          <img  :src="list.categoryImg"  class="avatar">
        </el-form-item>
        <el-form-item label="品种" prop="variety">
          <el-select v-model="list.variety" disabled>
            <el-option label="植物" value="0"></el-option>
            <el-option label="动物" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click='closeDialog()'>
      <el-form label-width="120px" :model="editForm" ref="editForm" :rules="rules">
        <el-form-item label="种类名称" prop="categoryName">
          <el-input size="small" v-model="editForm.categoryName" auto-complete="off" placeholder="请输入种类名称"></el-input>
        </el-form-item>
        <el-form-item label="种类图片" prop="categoryImg">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8099/oss/upload"
            field="file"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :key="imagecropperKey"
            :before-upload="beforeAvatarUpload">
            <img v-if="editForm.categoryImg" :src="editForm.categoryImg" v-model="editForm.categoryImg" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="品种" prop="variety">
          <el-select v-model="editForm.variety" >
            <el-option label="植物" value="0"></el-option>
            <el-option label="动物" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click='closeDialog("edit")'>取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm()">保存</el-button>
      </div>
    </el-dialog>

    <!-- 添加界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible1" width="30%" @click='closeDialog()'>
      <el-form label-width="120px" :model="addForm" ref="addForm" :rules="rules">
        <el-form-item label="种类名称" prop="categoryName">
          <el-input size="small" v-model="addForm.categoryName" auto-complete="off" placeholder="请输入种类名称"></el-input>
        </el-form-item>
        <el-form-item label="种类图片" prop="categoryImg">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8099/oss/upload"
            field="file"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="this.categoryImg" :src="this.categoryImg" v-model="addForm.categoryImg" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="品种" prop="variety">
          <el-select v-model="addForm.variety" >
            <el-option label="植物" value="0"></el-option>
            <el-option label="动物" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click='closeDialog()'>取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm1()">保存</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {
    categoryDelete, categoryList, categoryEdit, categorySave, categoryFindList, doctorEdit
  } from '../../api/userMG'
import Pagination from '../../components/Pagination'
export default {
  data() {
    return {
      imagecropperKey:0,
      pageNum: 1,
      pageSize: 2,
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      editFormVisible1: false, //控制添加页面显示与隐藏
      editFormVisible2:false,
      title: '添加',
      editForm: {
        id:'',
        categoryName:'',
        categoryImg: '',
        variety:'',
      },
      list: {
        id:'',
        categoryName:'',
        categoryImg: '',
        variety:'',
        browse:''
      },
      addForm: {
        categoryName: '',
        categoryImg: '',
        variety:'',
      },
      categoryImg:'',
      // rules 表单验证
      rules: {
        categoryName: [
          { required: true, message: '请输入种类名称', trigger: 'blur' }
        ],
        categoryImg: [
          { required: true, message: '请输入种类图片', trigger: 'blur' }
        ],
        variety: [
          { required: true, message: '请输入品种', trigger: 'blur' }
        ]
      },
      category:{},
      tableData: [], //用户数据
    }
  },
  // 注册组件
  components: {
    Pagination
  },
  /**
   * 数据发生改变
   */
  watch: {},

  created() {
    //全查种类
    this.search()
  },

  /**
   * 里面的方法只有被调用才会执行
   */

  methods: {
    //分页
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
    },
    //图片上传
    handleAvatarSuccess(res) {
      console.log(res.data.url)
      this.categoryImg = res.data.url
      this.addForm.categoryImg =res.data.url
      this.editForm.categoryImg =res.data.url
      this.imagecropperKey =this.imagecropperKey+1
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isGIF = file.type === 'image/gif';
      const isPNG = file.type === 'image/png';
      const isBMP = file.type === 'image/bmp';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isGIF && !isPNG && !isBMP) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return (isJPG || isBMP || isGIF || isPNG) && isLt2M;
    },
    // 搜索事件
    search() {
      categoryList(this.category).then(res => {
        this.loading = false
        this.tableData = res.data.data.list

      })
        .catch(err => {
          this.loading = false
          this.$message.error('种类信息加载失败，请稍后再试！')
        })
    },
    //显示编辑界面
    handleEdit(row) {
        this.editForm ={ ...row };
      // categoryFindList(row.id).then(res=>{
      //   this.editForm=res.data.data.list
      // })
      this.editFormVisible = true
      this.title = '编辑'
    },
    menuAccess(row){
      this.list ={ ...row };
      // categoryFindList(row.id).then(res=>{
      //   this.list=res.data.data.list
      // })
      this.editFormVisible2 = true
      this.title = '查看'
    },
    handleEdit1(){
      this.editFormVisible1 = true
      this.title = '添加'
    },
    // 编辑页面保存方法
    submitForm() {
          this.$confirm('是否修改此品种?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'}).then(() => {
            categoryEdit(this.editForm).then(res => {
              if (res.code == 20000) {
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
              }
              this.search()
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消修改',
            });
            this.editFormVisible = false
          });
    },

    // 增加页面保存方法
    submitForm1() {
      this.$confirm('是否添加?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'}).then(() => {
        categorySave(this.addForm).then(res => {
          if (res.code == 20000) {
            this.$message({
              message: "添加成功",
              type: "success",
            });
          }
          this.search()
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消添加',
        });
        this.editFormVisible1 = false
        this.addForm={}
      });
    },

    // 删除角色
    deleteUser(row) {
      this.$confirm('确定要删除吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'}).then(() => {
        categoryDelete(row.id).then(res => {
          if (res.code == 20000) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
          }
          this.search()
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '删除成功',
        });
            })
    },
    // 关闭编辑、增加弹出框
    closeDialog(dialog) {
        this.editFormVisible = false
        this.editFormVisible1 = false
       this.editFormVisible2=false

    }
  }
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
 .avatar-uploader .el-upload {
   border: 1px dashed #d9d9d9;
   border-radius: 6px;
   cursor: pointer;
   position: relative;
   overflow: hidden;
   margin-left: 30px ;
 }
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 110px;
  height: 110px;
  line-height: 110px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

